<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 500px;
            height: 700px;
            border: 5px solid red;
            margin: auto;
            text-align: center;
        }

        .input {
            max-width: 190px;
            height: 40px;
            padding: 10px;
            border: 2px solid #808080;
            border-radius: 5px;
        }

        .input:focus {
            color: #808080;
            outline-color: rgb(0, 255, 255);
            box-shadow: -3px -3px 15px rgb(0, 255, 255);
            transition: .1s;
            transition-property: box-shadow;
        }
        .addflex{
            display: flex;
        }
        .addborder{
            border: 1px solid black;
        }
        .addDistance{
            margin:20px 0;
        }
        .input2 {
            max-width: 300px;
            height: 100px;
            padding: 10px;
            border: 2px solid #808080;
            border-radius: 5px;
        }

        .input2:focus {
            color: #808080;
            outline-color: rgb(100, 129, 129);
            box-shadow: -3px -3px 15px rgb(101, 122, 122);
            transition: .1s;
            transition-property: box-shadow;
        }
        .add{
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: cadetblue;
        }
    </style>
    <script src="../../js/tools/tea.js"></script>
    <script src="../../js/tools/jquery.min.js"></script>
    <script src="../../js/tools/mock-min.js"></script>
    <script src="../../js/tools/utils.js"></script>
    <script src="../../js/compent/add.js"></script>
    <script src="../../js/api/addapi.js"></script>
</head>

<body>
    <div class="box">

        <div class="addDistance">
            <span>茶叶名：</span>
            <input placeholder="请输入茶叶名" class="input" name="text" type="text" id="teaName">
        </div>

        <div class="addflex addDistance" style="align-items: center; justify-content: center;">
            <input type="file" id="fileInput" onchange="getValue()">
            <div class="addborder" style="width: 80px; height: 80px;" id="teaPir">
                
            </div>
        </div>

        <div class="addDistance">
            <span>茶叶价格：</span>
            <input placeholder="请输入茶叶价格" class="input" name="text" type="text" id="teaPrice">
        </div>

        <div class="addDistance">
            <select name="teaClass" id="teaClass">
                <option value="0">请选择茶叶类型</option>
                <option value="1">绿茶</option>
                <option value="2">黄茶</option>
                <option value="3">乌龙茶</option>
                <option value="4">红茶</option>
                <option value="5">黑茶</option>
                <option value="6">白茶</option>
                <option value="7">花茶</option>
            </select>
        </div>

        <div class="addDistance">
            <textarea name="teaDescrible" id="teaDescrible" cols="30" rows="10" placeholder="请输入茶叶描述" class="input2">

            </textarea>
        </div>

        <div class="addDistance">
            <button class="add" onclick="addTea()">添加</button>
        </div>

    </div>
</body>

</html>